<template>
  <div class="device-node">
    <div
      class="device-header"
      @mouseenter="hover = true"
      @mouseleave="hover = false"
    >
      <div class="device-left" @click="toggle">
        <el-icon class="expand-icon">
          <component :is="expanded ? 'ArrowDown' : 'ArrowRight'" />
        </el-icon>
        <span class="device-name">{{ node.name }}</span>
        <el-tag size="small" :type="tagType(node.nodeType)" class="ml6">{{
          node.nodeType
        }}</el-tag>
      </div>

      <div class="device-actions">
        <!-- <el-button v-show="hover" type="primary" link size="small" @click="$emit('editDevice', node)">
          <el-icon><Edit /></el-icon> 修改
        </el-button> -->
        <el-button
          v-show="hover"
          type="primary"
          link
          size="small"
          @click="openEditDevice(node)"
        >
          <el-icon><Edit /></el-icon> 修改
        </el-button>
        <el-button
          v-show="hover"
          type="success"
          link
          size="small"
          @click="openAddAssessment(node)"
        >
          <el-icon><Plus /></el-icon> 新增评估
        </el-button>
      </div>
    </div>

    <transition name="fade">
      <div v-if="expanded" class="device-children">
        <DeviceNode
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          @editDevice="$emit('editDevice', $event)"
          @editSpare="$emit('editSpare', $event)"
        />

        <el-card
          v-if="node.spareInfos?.length"
          class="spare-card"
          shadow="never"
        >
          <template #header
            ><span class="spare-header">备件信息</span></template
          >
          <el-table :data="node.spareInfos" size="small" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="编码" width="140" />
            <el-table-column prop="stock" label="库存" width="100" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  link
                  size="small"
                  @click="openEditSpare(node, row)"
                >
                  修改
                </el-button>

                <el-button
                  type="success"
                  link
                  size="small"
                  @click="openEditAssessment(row)"
                  >编辑评估</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </transition>

    <AssessmentDialog ref="dlg" @refresh="getList" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ArrowDown, ArrowRight, Edit, Plus } from "@element-plus/icons-vue";
import AssessmentDialog from "@/components/sbtz/assessment/AssessmentDialog.vue";
import { listAssessment } from "@/api/sbtz/assessment";

defineOptions({ name: "DeviceNode" }); // 递归自引用需要名字

const props = defineProps({
  node: { type: Object, required: true },
});

const expanded = ref(false);
const hover = ref(false);

function toggle() {
  expanded.value = !expanded.value;
}

function openEditDevice(node) {
  dlg.value.open(node); // 弹出当前组件自己的修改窗口
}
function tagType(type) {
  return (
    {
      MACHINE: "primary",
      MODULE: "success",
      COMPONENT: "warning",
      PART: "info",
    }[type] || "default"
  );
}

function openEditSpare(device, spare) {
  console.log(device, spare);
  // 拿到当前设备id与备件id
  const assetId = device.id;
  const spareId = spare.id;

  // 调试看看
  console.log("正在修改备件:", { assetId, spareId });

  // 如果你要打开评估弹窗：
  dlg.value.open({
    assetId,
    spareId,
  });

  // 或者如果未来有独立的“备件修改弹窗”，可以换成：
  // spareDlg.value.open({ assetId, spareId })
}

// —— 评估弹窗控制 ——
const dlg = ref(null);
const list = ref([]);

function getList() {
  // 如需刷新外层评估列表，保留；不需要可删
  listAssessment().then((res) => (list.value = res.rows));
}

function openAddAssessment(node) {
  if (!dlg.value?.open) {
    console.warn("dlg.open 不存在，检查 AssessmentDialog 引入与 defineExpose");
    return;
  }
  dlg.value.open({ assetId: node.id });
}

function openEditAssessment(row) {
  if (!dlg.value?.open) {
    console.warn("dlg.open 不存在，检查 AssessmentDialog 引入与 defineExpose");
    return;
  }
  // 注意：row 必须是“评估”行，且包含 id/assetId 等字段
  // 如果这里传的是备件行，需要先查该备件对应的评估记录，再传入
  dlg.value.open(row);
}
</script>

<style scoped>
.device-node {
  margin-top: 6px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: none; 
}
.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background 0.2s, box-shadow 0.2s;
}
.device-header:hover {
  background: #f5f7fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.device-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.expand-icon {
  margin-right: 6px;
  color: #909399;
}
.device-name {
  font-weight: 500;
  font-size: 14px;
  color: #303133;
}
.device-actions {
  flex-shrink: 0;
}
.device-children {
  margin-top: 8px;
  margin-left: 24px;
}
.spare-card {
  margin-top: 10px;
  background: #fff;
  border-radius: 6px;
}
.spare-header {
  font-weight: 600;
  font-size: 13px;
  color: #606266;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}
</style>
